<template>
	<div style="margin-left: 5px;">
     <div>

		<div>
            
            
				<div>
                     <h3 style="display:inline-block">{{Data.CodeNum}}.</h3> 
				<span v-html="Data.Title" style="display:inline-block"></span><el-input-number style="margin-left:10px" size="mini"  v-if="Data.TitleBlank" @change="checkItem()" :controls="false" v-model="Data.BlankValue"></el-input-number>
                <el-button   @click="divvisibility(2)" type="text"  style="float:right"  v-if="!preview">{{see}}</el-button>
				</div>
                <!-- 选项横置 -->
				<div class="option-area" style="margin: 5px;" v-if="visible" v-show="show">
                    <el-table :data="Data.RowTitles" style="width: 100%">
                        <el-table-column fixed type="index" width="100" :index="GetRowTitleByIndex"></el-table-column>
                        <el-table-column  v-for="opt in Data.Options" :label="opt.itemName" :key="opt.itemName">
                            <template slot-scope="scope">
                            <el-radio v-model="scope.row.RadioSelValue" :name="scope.row.Title" :label="opt.itemName"><span/>
                               <el-input style="width:100px" v-model="opt.BlankValues[scope.row.Index]"  v-if="opt.canFillBlank&&(scope.row.RadioSelValue==opt.itemName)" size="mini" /> 
                            </el-radio>
                        </template>
                        </el-table-column>
                      
                    </el-table>

      
				</div>
            <!-- 选项竖置 -->

                <div class="option-area" style="margin: 5px;" v-if="visible" v-show="!show">
                    <el-table :data="Data.Options" style="width: 100%">
                        <el-table-column fixed type="index" width="100" :index="getitemName"></el-table-column>
                        <el-table-column  v-for="rt in Data.RowTitles" :label="rt.Title" :key="rt.Title" >
                            <template slot-scope="scope">
                            <el-radio v-model="scope.row.SelValue" :name="scope.row.Title" :label="rt.Title"  ><span/>
                            <el-input style="width:100px" v-model="rt.CheckBlack[scope.row.Index]"  v-if="scope.row.canFillBlank&&(scope.row.SelValue==rt.Title)" size="mini" />  
                            </el-radio>
                        </template>
                        </el-table-column>
                      
                    </el-table>

      
				</div>
			</div>

	</div>
    
    <div id='editor' v-if='canEdit==true' style="margin: 5px;">
		<el-card class="box-card" style="margin-top:20px" >
  		  <EditorComponent  v-model="Data.Title"  :Html="Data.Title"  />
		<el-row>
                <el-col :span="8">
                    <el-card >
                        
                        <div style="padding: 14px;">
                        <tr>
                            <td ><span>行标题</span></td>
                            
                        </tr>
                        <div>
                        <el-input type="textarea" @input="UpdateRowTitle" v-model="Data.RowTitleText" :rows="10" placeholder="请输入内容" ></el-input>

                        </div>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="16">
                    <el-card style="margin-left:10px" >
                        
                        <el-table :fit="true" :data="Data.Options" style="width: 100%">
                            <el-table-column  label="选项文字" >
                                <template slot-scope="scope">
                                    <div id='title-row' >
                                        <el-input size="small" style='display: inline-block;'  v-model="scope.row.itemName" placeholder="请输入内容"></el-input>
                                    </div>
                                    </template>
                            </el-table-column>

                                 <el-table-column  label="允许填空">
                                    <template slot-scope="scope">
                                        <el-checkbox  v-model="scope.row.canFillBlank" ></el-checkbox>
                                    </template>
                                </el-table-column>

                                <el-table-column  label="操作"  >
                                        <template slot-scope="scope">
                                                <div style='display: inline-block;margin-top: 5px;'>
                                                    <el-button type="warning" @click="remove(scope.row.itemId)" size="mini" style='display: inline-block;' icon="el-icon-minus" circle></el-button>
                                                    <el-button type="danger"  @click="insert(scope.row.itemId)" size="mini" style='display: inline-block;'  icon="el-icon-plus" circle></el-button>
                                                    <el-button  size="mini" style='display: inline-block;' @click='moveUp(scope.row.itemId)' icon="el-icon-top" circle></el-button>
                                                    <el-button  size="mini" style='display: inline-block;' @click='moveDown(scope.row.itemId)' icon="el-icon-bottom" circle></el-button>
                                                </div>
                                        </template>
                                </el-table-column>



                         </el-table>
                         <BatchAddComponent v-model="msg" @getitem="itemNameArry" :itemnamearry="itemname"></BatchAddComponent>
                    </el-card>
                </el-col>
        </el-row>
							

      
	     <button @click="getanswer(1)">answer</button> <el-button @click="chang" type="text">行列转置</el-button>
	     <el-button type="warning " style='margin-top:5px;width:100%' @click="canEdit=false">完成编辑</el-button>
		 
		 </el-card>
	     </div>
	</div>
</template>

<script lang='ts'>
  
    import {Component, Vue, Watch, Prop } from 'vue-property-decorator'
    import TBaseQuestion from './ts/TBaseQuestion'
	import MatrixRadioSubject,{MatrixRadioOption} from './ts/MatrixRadioSelSubject'
	import { QuestionDataTypes,QuestionTypes } from './ts/QuestionDataTypes';
	import DataTypeSelector from './DataTypeSelector.vue'

    import BatchAddComponent from './BatchAddComponent.vue'
	import EditorComponent from './EditorComponent.vue'
	import OrderBy,{OrderByTypes} from './ts/OrderByTypes'
    import OrderByComponent from './OderByComponent.vue'
    import MatrixRowTitle from './ts/MatrixRowTitle'
    import IndexObj from './ts/IndexObj';
    import ImageBase64Componet from './ImageBase64Componet.vue';
 @Component(
     {
         components:{EditorComponent,DataTypeSelector,OrderByComponent,BatchAddComponent,ImageBase64Componet}
     }
 )
 //矩阵单选组件
	export  default class TrueFalseMatrixRadioSelComponent  extends TBaseQuestion<MatrixRadioOption,MatrixRadioSubject> {
	  
	  
     
      $name:string= 'TrueFalseMatrixRadioSelComponent'
      canEdit=true;
      
      see="显示";
      show=true;
      visible=false;

      itemname="";
      check:string[]=[];
      msg="";
      gotMsg:string[]=[];
      options:MatrixRadioOption[]=[];
      
 @Watch('Data.RowTitles')
  watchData(newVal:Array<MatrixRowTitle>, oldVal:Array<MatrixRowTitle>) {
   
       console.log("RowTitle Changed:"+newVal);
       if(newVal==null)
       return;
     this.Data.RowTitleText=this.ConvertTitleArrayToStr(newVal);

  }

       @Watch('msg')
	    getstr(){
			console.log(this.msg);
			this.gotMsg=this.msg.split('\n')
			this.gotMsg.forEach(element => {
			  if(element!=" "){
			    var opt =new MatrixRadioOption();
			    opt.itemName=element;
			    this.options.push(opt);
			  }
		    });
		    this.Data.Options=this.options;
			this.options=[];
       }
       itemNameArry(){
         this.itemname=this.getOptionText();
        }
       
       //获取options中每一项的name
	    getOptionText():string{
			let options=this.Data.Options[0].itemName+"\n";
			let n=this.Data.Options.length;
			for(let i=1;i<n;i++){
				if(i<(n-1)){
					options+=this.Data.Options[i].itemName+"\n";
				}else{
                    options+=this.Data.Options[i].itemName;
				}
			}
			return options;
			
		}
      constructor ()
      {
		  super(MatrixRadioOption,MatrixRadioSubject);
		  
          this.Data.DataType= QuestionDataTypes.dtText;
          this.Data.QuestionType=QuestionTypes.qtMatrixRadio;
          this.Data.Title="矩阵单选标题";
          
        for(var i:number=0;i<3;i++)
          {
              this.Data.RowTitles.push(new MatrixRowTitle(i,'标题'+(i+1)));
            
          }

          this.Data.RowTitleText= this.ConvertTitleArrayToStr(this.Data.RowTitles);

        for(var i:number=0;i<5;++i)
          {
              var opt = new MatrixRadioOption();
              opt.itemName='选项'+i;
              for(var j:number=0;j<this.Data.RowTitles.length;j++)
              {
                  opt.BlankValues.push('');
              }
              this.Data.Options.push(opt);
          };

      }
 mounted()
    {
         super.mounted();
         this.initProps();

         console.info("component mounted!");
    }
      //输入框内容改变
	   inputchange(){
		   this.msg=this.getOptionText();
	   }
	//删除选项
	remove(str:string):void{
		super.remove(str);
		this.msg=this.getOptionText();
	}
	     //插入选项
    insert(id:string):void
    {
        let options= this.Data.Options;
        options.splice(options.findIndex(item=>item.itemId===id)+1,0,this.createNewOption(MatrixRadioOption));
        this.SetBlankValues();
        this.msg=this.getOptionText();
    };
	//向上移动选项
	moveUp(id:string):void{
		super.moveUp(id);
		this.msg=this.getOptionText();
	}
	moveDown(id:string){
		super.moveDown(id);
		this.msg=this.getOptionText();
	}
    //数组转为字符串
      ConvertTitleArrayToStr(arry:Array<MatrixRowTitle>):string
      {
         var tempArray:Array<string>=[];
         for(var t of arry)
         {
             tempArray.push(t.Title);
         }

         return tempArray.join('\n');
      }

      GetRowTitles():string
      {
          return this.ConvertTitleArrayToStr(this.Data.RowTitles);
      }
   
	

    //设置填空数组的长度
    SetBlankValues():void
    {
        
        for(var opt of this.Data.Options)
        {
            opt.BlankValues=[];

            for(var i=0;i<this.Data.RowTitles.length;++i)
            {
                opt.BlankValues.push('');
            }

        }
    }
     getQuestionData():any
     {
         return this.Data;
     }

     setQuestionData(data:string)
     {

     };

     getTitle():void
     {
        // console.info(Data.Title);
         // this.Data.Title;
	 }
	 
	 setTitle(txt:string):void
	 {
		 console.info(txt);
	 }

	GetHtml(html:string):void
    {
        this.Data.Title=html;
    }
    
    UpdateRowTitle():void
    {
        var tempArray = this.Data.RowTitleText.split("\n");
        this.Data.RowTitles=[];
        var index:number=0;
        for(var t of tempArray)
        {
            this.Data.RowTitles.push(new MatrixRowTitle(index,t));
            index++;
        }
        this.SetBlankValues();
    }
    
    GetRowTitleByIndex(index:number):string
    {
        return this.Data.RowTitles[index].Title;
    }
	
	 //抽取答案
	 getanswer(id:string):object[]{
         this.initanswer(1);
         if(this.show){
           for(let i=0;i<this.columitem.length;i++){
               for(let j=0;j<this.columitem[i].checkvalue.length;i++){
                   this.Data.answer[i].checkvalue[1]=this.columitem[i].checkvalue[j];
                   this.Data.answer[i].blankvalue[1]=this.columitem[i].blankvalue[j];
               }
            }
         }else{
             for(let i=0;i<this.columitem.length;i++){
                let num=this.Data.answer.findIndex(e=>e.optionId===this.columitem[i].optionId);
                if(num>-1){
                   this.Data.answer[num].checkvalue[1]=this.columitem[i].optionId;
                   this.Data.answer[num].blankvalue[1]=this.columitem[i].optionId;
                }  
             }
         }
         this.Data.answer.forEach(e=>{
            let str=e.optionId;
            for(let i=0;i<e.checkvalue.length;i++){
                str+=e.checkvalue[1]+':'+e.blankvalue[1]+" ";
                console.log(str);
            }     
         });
         return this.Data.answer;
     }
	getitem(num:string):void{
      console.log(num);
    }
     
     GetoptionByIndex(index:number){
        return this.Data.Options[index].itemName;
     }
     chang(){
         for(let i=0;i<this.Data.Options.length;i++){
            this.check[i]=this.Data.Options[i].itemId;
         }
         this.show=!this.show;
         
     }
     getitemName(index:number){
         return this.Data.Options[index].itemName;
     }
    }
   
</script>
 
<style>
.optionLayout{
                display: flex;
                display: -webkit-flex;
                border: 1px solid gainsboro;
                flex-flow: row wrap;
                width: 100%;
                align-items:center;
                justify-content:left;
            }
.setting-table td{  text-align: center;vertical-align:middle;} table{ width: 100%;font-size: 14px;margin-top: 5px}

</style>
